<template>
	<div>
		<div style="height: 20px;display:flex;align-items: center;">
			<span style="height: 20px;line-height: 20px;font-size: 20px;margin-bottom: 20px;">公告新闻</span>
		</div>
		<el-row class="el-row" style="width: 88%;margin-left: 6%;">
			<el-col class="el_col" :span="6" v-for="(item,index) in tabledata" :key="index">
				<el-card class="elCard" :body-style="{ padding: '0px' }" shadow="hover">
					<div @click="toDetails(item.id)">
						<div class="image">
							<img :src="require('@/assets/notice/'+item.imageUrl)">
						</div>
						<div class="notice_content">
							<div class="title">
								<span>{{item.title}}</span>
							</div>
							<div class="abstract">
								<p class="abstract_p">
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.abstract}}
								</p>
								<!-- <span class="abstract_content">{{item.abstract}}</span> -->
							</div>
							<div class="publishedTime">
								<span>{{item.publishedTime.substring(0,10)}}</span>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="pageParams.currentPageNum" :page-sizes="pageArr" :page-size="pageParams.size"
			layout="total, sizes, prev, pager, next, jumper" :total="totalNum">
		</el-pagination>
	</div>
	</div>
</template>

<script>
	import request from '../../utils/axios/request'
	export default {
		data() {
			return {
				pageParams: {
					// name:'',
					currentPageNum: 1,
					pageSize: 8
				},
				totalNum: '',
				pageArr: [8, 16, 32, 64],
				// pageArr: [1, 2, 4, 8],
				//v-if根据它重新实例化组件       
				reset: true,
				tabledata: [{
					id: '',
					imageUrl: '',
					title: '',
					abstract: '',
					publishedTime: ''
				}]
			}
		},
		methods: {
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageParams.pageSize = val
				// console.log(this.pageParams.currentPageNum)
				// console.log(this.pageParams.pageSize)
				request({
					method: 'get',
					url: '/notice/findNoticesByPages',
					params: {
						currentPageNum: this.pageParams.currentPageNum,
						pageSize: this.pageParams.pageSize
					}
				}).then((res) => {
					// console.log(res)		
					if (res.data.code == 100) {
						var jsonObj = JSON.parse(JSON.stringify(res.data.data));
						// console.log(jsonObj)
						// console.log('阿八八八')
						for (var i = 0; i < jsonObj.length; i++) {
							jsonObj[i].id = jsonObj[i].noticeId;
							jsonObj[i].title = jsonObj[i].noticeTitle;
							jsonObj[i].abstract = jsonObj[i].noticeContent;
							jsonObj[i].imageUrl = jsonObj[i].imageUrl;
							jsonObj[i].publishedTime = jsonObj[i].noticeCreatetime;
						}
						this.tabledata = jsonObj
						// console.log(this.tabledata)
					}
				})
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.pageParams.currentPageNum = val
				request({
					method: 'get',
					url: '/notice/findNoticesByPages',
					params: {
						currentPageNum: this.pageParams.currentPageNum,
						pageSize: this.pageParams.pageSize
					}
				}).then((res) => {
					// console.log(res)		
					if (res.data.code == 100) {
						var jsonObj = JSON.parse(JSON.stringify(res.data.data));
						// console.log(jsonObj)
						// console.log('阿八八八')
						for (var i = 0; i < jsonObj.length; i++) {
							jsonObj[i].id = jsonObj[i].noticeId;
							jsonObj[i].title = jsonObj[i].noticeTitle;
							jsonObj[i].abstract = jsonObj[i].noticeContent;
							jsonObj[i].imageUrl = jsonObj[i].imageUrl;
							jsonObj[i].publishedTime = jsonObj[i].noticeCreatetime;
						}
						this.tabledata = jsonObj
						// console.log(this.tabledata)
					}
				})
			},
			toDetails(id) {
				// console.log(id)
				this.$router.push({
					path: 'noticeDetails',
					query: {
						noticeId: id
					}
				})
			}
		},
		created() {
			request({
				method: 'get',
				url: '/notice/visibleNoticeCount',
			}).then((res) => {
				// console.log(res)
				this.totalNum = res.data
				// console.log(this.totalNum)
				request({
					method: 'get',
					url: '/notice/findNoticesByPages',
					params: {
						currentPageNum: this.pageParams.currentPageNum,
						pageSize: this.pageParams.pageSize
					}
				}).then((res2) => {
					// console.log(res2)

					if (res2.data.code == 100) {
						var jsonObj = JSON.parse(JSON.stringify(res2.data.data));
						// console.log(jsonObj)
						// console.log('阿八八八')
						for (var i = 0; i < jsonObj.length; i++) {
							jsonObj[i].id = jsonObj[i].noticeId;
							jsonObj[i].title = jsonObj[i].noticeTitle;
							jsonObj[i].abstract = jsonObj[i].noticeContent;
							jsonObj[i].imageUrl = jsonObj[i].imageUrl;
							jsonObj[i].publishedTime = jsonObj[i].noticeCreatetime;
						}
						this.tabledata = jsonObj
						// console.log(this.totalNum)
						// console.log(this.tabledata)
					}
				})
			})
		}
	}
</script>

<style scoped>
	.elCard :hover {
		cursor: pointer;
	}

	.notice_content {
		height: 120px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #ffffff;
	}

	.publishedTime {
		width: 100%;
		margin-top: 10px;
		height: 20px;
		line-height: 20px;
		text-align: right;
		background-color: #ffffff;
	}

	.abstract {
		width: 100%;
		height: 60px;
		max-height: 60px;
		font-size: 12px;
		line-height: 60px;
		background-color: #ffffff;
	}

	.abstract_p {
		width: 100%;
		max-height: 50px;
		line-height: 25px;
		text-align: start;
		margin: 0 auto;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		/*  超出的文本隐藏 */
		display: -webkit-box;
		/* 将对象作为弹性伸缩盒子模型显示。 */
		-webkit-line-clamp: 2;
		/* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */

	}

	.title {
		width: 100%;
		text-align: left;
		height: 30px;
		font-size: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 30px;
		background-color: #ffffff;

	}

	.el_col {
		width: 308px;
		height: 280px;
		margin: 20px 6px;
		margin-bottom: 20px;
		background-color: #aaff00;
	}

	.el-row {

		background-color: #ffffff;
	}

	.el-card {
		width: 100%;
		height: 100%;

	}

	.image {
		width: 320px;
		height: 160px;
	}

	.image img {
		width: 100%;
		height: 100%;
	}
</style>